<!-- 我处理的-菜品详情组件 -->
<template name="mydealdetailCom3">
	<view class="mydealdetailCom mydealdetailCom3">
		<view class="content">
			<view class="list">
				<view class="list_item">
					<view class="item_title">BD</view>
					<view class="item_text">{{shopInfo.aid_name}} AID{{shopInfo.aid}}</view>
				</view>
				<view class="list_item">
					<view class="item_title">商家电话</view>
					<view class="item_text item_phone" @click="makePhone(shopInfo.service_phone)">
						{{shopInfo.service_phone}}
					</view>
				</view>
				<view class="list_item">
					<view class="item_title">门店地址</view>
					<view class="item_text">{{shopInfo.address}}</view>
				</view>
				<view class="list_item">
					<view class="item_title">提交时间</view>
					<view class="item_text">{{shopInfo.commit_time}}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="food">
				<view class="food_title">
					<view>菜品审核</view>
				</view>
				<view class="food_list">
					<view class="food_item" v-for="(item,index) in goodsList">
						<view class="item_sel">
							<text v-show="!batch.isBatch">{{index+1}}</text>
							<view v-show="batch.isBatch">
								<view @click="foodSel(index)"
								 v-show="!item.isSel" class="item_sel_no"></view>
								<image @click="foodSel(index)"
								 v-show="item.isSel" src="../../../static/img/ic_choose.png"></image>
							</view>
						</view>
						<view class="item_img">
							<image :src="item.picture" @click="previewImg(item.picture)"></image>
						</view>
						<view class="item_con">
							<view class="item_text">
								<view class="item_text_title">菜品名称: </view>
								<view class="item_text_con fontbold">{{item.goods_name}}</view>
							</view>
							<view class="item_text">
								<view class="item_text_title">商品介绍: </view>
								<view class="item_text_con">{{item.goods_desc}}</view>
							</view>
							<view class="item_text item_btn" v-show="!batch.isBatch" v-if="dealtype==0">
								<view :class="item.selState==1?'target':''"
								 @click="foodselState(index,1)">拒绝</view>
								<view :class="item.selState==2?'target':''"
								 @click="foodselState(index,2)">通过</view>
							</view>
							<view v-else class="item_text item_btn">
								<text :class="statusColor[item.mxe_audit_status]">{{statusObj[item.mxe_audit_status]}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" v-show="!batch.isBatch" v-if="dealtype==0">
				<button type="primary" @click="batchMake(true)">批量操作</button>
				<button type="primary" @click="audit()">提交</button>
			</view>
			<view class="btn btn_batch" v-show="batch.isBatch">
				<view class="allsel">
					<view @click="isallFun()"
					 v-show="!isAll" class="item_sel_no"></view>
					<image @click="isallFun()"
					 v-show="isAll" src="../../../static/img/ic_choose.png"></image>
					 全选
				</view>
				<button type="default" class="btn_reject" @click="audit(1)">批量通过</button>
				<button type="default" class="btn_reject" @click="audit(-1)">批量拒绝</button>
				<button type="default" class="btn_reject" @click="batchMake(false)">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { verifygoods } from '../../../api/index.js'
	export default {
		data() {
			return {
				batch:{
					isBatch:false, //是否开启批量操作
					isOpen:true //批量操作是否为通过
				},
				isAll: false,//是否全选
				goodsList:'',  //菜品列表
				shopInfo:'',
				statusObj:{
					'0':'审核中',
					'1':'审核通过',
					'-1':'审核失败'
				},
				statusColor:{
					'0':'orangefont',
					'1':'bluefont',
					'-1':'redfont'
				}
			}
		},
		props: {
			infoData:'',
			dealtype:''
		},
		methods: {
			async verifyFun(obj){
				let data = await verifygoods(obj);
				console.log(data)
				uni.showModal({
					title:'提示',
					content: data.msg,
					complete:function(){
						if(data.code == 0){
							uni.navigateBack({
								
							})
						}
					}
				})
			},
			async audit(status){
				if(this.batch.isBatch){ //是否有开启批量操作
					let gidStr = '';
					for (let item of this.goodsList) {
						if(item.isSel){
							gidStr += item.gid+","
						}
					}
					if(gidStr==''){
						uni.showToast({
							icon:'none',
							title:'请选择菜品'
						})
					}else{
						gidStr = gidStr.slice(0,gidStr.length-1)
						let obj = {
							gids:gidStr,
							status: status  //判断是批量通过还是批量拒绝
						}
						console.log(obj)
						this.verifyFun(obj);
					}
				}else{ //如果没有批量操作
					let gidpassStr = '';
					let gidrejectStr = '';
					for (let item of this.goodsList) {
						if(item.selState == 1){ //拒绝状态
							gidrejectStr += item.gid+","
						}else if(item.selState == 2){ //通过状态
							gidpassStr += item.gid+","
						}
					}
					if(gidpassStr!=''){
						gidpassStr = gidpassStr.slice(0,gidpassStr.length-1)
					}
					if(gidrejectStr!=''){
						gidrejectStr = gidrejectStr.slice(0,gidrejectStr.length-1)
					}
					
					let objpass = {
						gids:gidpassStr,
						status:1
					}
					let objreject = {
						gids:gidrejectStr,
						status:-1
					}
					if(gidpassStr=='' && gidrejectStr==''){
						uni.showToast({
							icon:'none',
							title:'请选择菜品'
						})
					}else if(gidpassStr=='' && gidrejectStr!=''){
						this.verifyFun(objreject);
					}else if(gidpassStr!='' && gidrejectStr==''){
						this.verifyFun(objpass);
					}else{
						//假如有一个审核失败的逻辑
						let passData = await verifygoods(objpass);
						let rejectData = await verifygoods(objreject);
						if(passData.code == 0 && rejectData.code ==0){
							uni.showModal({
								title:'提示',
								content: data.msg,
								complete:function(){
									if(data.code == 0){
										uni.navigateBack({
											
										})
									}
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:passData.msg
							});
							uni.showToast({
								icon:'none',
								title:rejectData.msg
							})
						}
					}
				}
				
			},
			makePhone:function(phone){
				cm.makePhoneCall({
					phone:phone
				});
			},
			//开启批量操作
			batchMake:function(isbatch){
				this.batch.isBatch = isbatch;
				// this.batch.isOpen = isopen;
			},
			//批量选择按钮
			foodSel:function(index){
				this.$set(this.goodsList[index],'isSel',!this.goodsList[index].isSel)
			},
			//选中状态按钮
			foodselState:function(index,state){
				if(this.goodsList[index].selState == state){
					this.$set(this.goodsList[index],'selState',0)
				}else{
					this.$set(this.goodsList[index],'selState',state)
				}
			},
			//图片放大
			previewImg:function(url){
				uni.previewImage({
					urls:[url]
				})
			},
			//全选按钮被点击
			isallFun:function(){
				this.isAll = !this.isAll;
				for (let item of this.goodsList) {
					item.isSel = this.isAll
				}
			}
		},
		watch:{
			infoData:function(){
				let goodsList = this.infoData.goods_list;
				for (let item of goodsList) {
					//此处必须用set方式赋值，否则会出现数值更新无法渲染的情况
					this.$set(item, 'isSel', false) //当前元素是否被选中
					this.$set(item, 'selState', 0) //当前元素被选中的状态, 0:无状态 1:拒绝 2:通过 
				}
				this.goodsList = goodsList;
				console.log(goodsList)
				this.shopInfo = this.infoData.shop_info;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './mydealdetailCom.scss';
	.mydealdetailCom3{
		.content{
			.list{
				margin: 0;
			}
		}
		.food{
			.food_title{
				color: #999999;
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				font-size: $uni-font-size-sm;
			}
			.food_list{
				margin-bottom: 30rpx;
				.food_item{
					display: flex;
					background-color: #FFFFFF;
					align-items: center;
					padding: 20rpx 0;
					.item_sel{
						margin: 0 20rpx 0 20rpx;
						font-weight: bold;
						.item_sel_no{
							width: 28rpx;
							height: 28rpx;
							border: 1rpx solid #666666;
							border-radius: 100%;
						}
						image{
							width: 36rpx;
							height: 36rpx;
						}
					}
					.item_img{
						margin-right: 16rpx;
						image{
							width: 160rpx;
							height: 160rpx;
						}
					}
					.item_con{
						width: 65%;
						align-self: flex-start;
						.item_text{
							color: #333333;
							display: flex;
							font-size: $uni-font-size-sm;
							margin-bottom: 10rpx;
							.item_text_title{
								width: 25%;
							}
							.item_text_con{
								width: 75%;
								font-size: $uni-font-size-base;
							}
							.fontbold{
								font-weight: bold;
							}
							&.item_btn{
								justify-content: flex-end;
								view{
									width: 96rpx;
									height: 48rpx;
									line-height: 48rpx;
									border: 1rpx solid #999999;
									border-radius: 6rpx;
									font-size: $uni-font-size-sm;
									background-color: #FFFFFF;
									color: #999999;
									text-align: center;
									margin-left: 20rpx;
									&.target{
										border-color: #2E7BFD;
										color: #2E7BFD;
									}
								}
							}
						}
					}
				}
			}
		}
		.btn_batch{
			.allsel{
				display: flex;
				width: 15%;
				justify-content: space-around;
				align-items: center;
				.item_sel_no{
					width: 28rpx;
					height: 28rpx;
					border: 1rpx solid #666666;
					border-radius: 100%;
				}
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
			button{
				width: 25%;
				font-size: $uni-font-size-base;
			}
		}
	}
</style>